<template>
  <div id="app">
    <!-- 父传子
    1.父组件以v-bind属性的形式绑定到子组件身上
    2.子组件通过props属性进行接受
     -->
    <h2>组件name的作用</h2>
    <tree-list :list="listDatas"></tree-list>
    <h2>动态组件</h2>
    <change-com></change-com>
  </div>
</template>
 
<script>
import TreeList from "./components/01/TreeList.vue";
import ChangeCom from "./components/02/ChangeCom.vue";
export default {
  name: "App",
  components: { TreeList, ChangeCom },
  data() {
    return {
      listDatas: [
        {
          id: 1,
          title: "电脑",
          children: [
            {
              id: 11,
              title: "笔记本",
              children: [
                { id: 111, title: "联想" },
                { id: 112, title: "华硕" },
                { id: 113, title: "苹果" },
              ],
            },
            { id: 12, title: "台式机" },
          ],
        },
        {
          id: 2,
          title: "ipad",
          children: [
            { id: 21, title: "大屏" },
            { id: 22, title: "小屏" },
          ],
        },
        {
          id: 3,
          title: "手机",
          children: [
            { id: 31, title: "智能" },
            { id: 32, title: "非智能" },
          ],
        },
      ],
    };
  },
};
</script>

<style>
</style>
